<template>
	<view style="display: flex;" v-if="hero">
		<!-- 左侧英雄菜单 -->
		<scroll-view
			scroll-y
			style="width: 30%;"
			:style="{ height: windowHeight + 'px' }"
			v-if="data"
		>
			<view
				:class="{ cur: current == index }"
				class="item"
				v-for="(item, index) in hero"
				:key="index"
				@click="doClick(index)"
				hover-class="active"
				hover-stay-time="200"
			>
				{{ item.title }}
			</view>
		</scroll-view>
		<!-- 右侧英雄详情 -->
		<scroll-view
			scroll-y
			style="width: 70%;"
			:style="{ height: windowHeight + 'px' }"
			v-if="data && showRight"
		>
			<view class="area-right">
				<!-- 头像和基本信息 -->
				<view style="display: flex;">
					<image
						:src="heroIcon"
						mode=""
						style="width: 180rpx; height: 180rpx;"
					></image>
					<view style="margin-left: 15rpx;">
						<!-- 名称 -->
						<view style="font-size: 1.2em;font-weight: bold;">
							{{ heroInfo.title }}
						</view>
						<!-- 昵称 -->
						<view>昵称:{{ heroInfo.name }}</view>
						<!-- 金币 -->
						<view>金币:{{ heroInfo.goldPrice }}</view>
						<!-- 点券 -->
						<view>点券:{{ heroInfo.couponPrice }}</view>
					</view>
				</view>
				<!-- 背景故事 -->
				<uni-card title="背景故事:" isFull>
					<view style="font-size: 0.8em;">
						{{ heroInfo.shortBio }}
					</view>
				</uni-card>
				<!-- 使用建议 -->
				<uni-collapse>
					<uni-collapse-item title="使用建议">
						<uni-list>
							<uni-list-item
								v-for="(item, index) in heroInfo.allytips"
								:key="index"
								:title="item"
								note=""
							></uni-list-item>
						</uni-list>
					</uni-collapse-item>
				</uni-collapse>
				<!-- 对战技巧 -->
				<uni-collapse>
					<uni-collapse-item title="对战技巧">
						<uni-list>
							<uni-list-item
								v-for="(item, index) in heroInfo.enemytips"
								:key="index"
								:title="item"
								note=""
							></uni-list-item>
						</uni-list>
					</uni-collapse-item>
				</uni-collapse>
				<!-- 技能说明 -->
				<uni-collapse>
					<uni-collapse-item title="技能说明">
						<uni-list>
							<uni-list-item
								v-for="(item, index) in spells"
								:key="index"
								:title="item.name"
								:thumb="item.abilityIconPath"
								thumbSize="lg"
								:note="item.description"
								direction="column"
							></uni-list-item>
						</uni-list>
					</uni-collapse-item>
				</uni-collapse>
				<!-- 皮肤 -->
				<uni-collapse>
					<uni-collapse-item title="皮肤">
						<uni-list>
							<uni-list-item
								v-for="(item, index) in skins"
								:key="index"
								:title="item.name"
								:thumb="item.iconImg"
								thumbSize="lg"
								:note="item.description"
							></uni-list-item>
						</uni-list>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 英雄菜单列表
			hero: null,
			current: 0,
			// 英雄详情
			data: null,
			// 右侧刷新状态
			showRight:true
		};
	},
	mounted() {
		this.getMenu();
	},
	methods: {
		// 获取英雄详情
		getHeroDetail(heroId) {
			const url = `https://game.gtimg.cn/images/lol/act/img/js/hero/${heroId}.js`;
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.data = res.data;
					this.showRight = false;
					this.$nextTick(()=>{
						this.showRight = true;
					})
				},
				fail: () => {},
				complete: () => {}
			});
		},
		// 当前选中的菜单
		doClick(index) {
			this.current = index;
			const hid = this.hero[index].heroId;
			this.getHeroDetail(hid);
		},
		// 获取菜单
		getMenu() {
			const url =
				'https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js';
			uni.request({
				url,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.hero = res.data.hero;
					this.getHeroDetail(this.hero[0].heroId);
				},
				fail: () => {},
				complete: () => {}
			});
		}
	},
	computed: {
		windowHeight() {
			return uni.getSystemInfoSync().windowHeight;
		},
		skins() {
			return this.data.skins;
		},
		spells() {
			return this.data.spells;
		},
		heroInfo() {
			return this.data.hero;
		},
		heroIcon() {
			return `https://game.gtimg.cn/images/lol/act/img/champion/${
				this.heroInfo.alias
			}.png`;
		}
	}
};
</script>

<style lang="scss">
.area-right{
	padding: 10rpx;
	background-color: #eee;
}
.item {
	padding: 15rpx;
	text-align: center;
	border-bottom: 1px solid #989898;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	&.cur {
		background-color: #eee;
		color: #007aff;
		font-weight: bold;
	}
}
</style>
